<template>
  <el-dialog
      :model-value="dialogVisible"
      :title="dialogTitle"
      width="40%"
      @close="handleClose"
  >
    <el-form :model="form" label-width="100px" :rules="rules" ref="formRef">
      <el-form-item label="学号" prop="student_id">
        <el-input v-model="form.student_id" placeholder="请输入学号"></el-input>
      </el-form-item>
      <el-form-item label="学生姓名" prop="student_name">
        <el-input v-model="form.student_name" placeholder="请输入学生姓名"></el-input>
      </el-form-item>
      <el-form-item label="科目" prop="subject">
        <el-select v-model="form.subject" placeholder="请选择科目" style="width: 100%">
          <el-option label="语文" value="语文"/>
          <el-option label="数学" value="数学"/>
          <el-option label="英语" value="英语"/>
          <el-option label="物理" value="物理"/>
          <el-option label="化学" value="化学"/>
          <el-option label="生物" value="生物"/>
          <el-option label="历史" value="历史"/>
          <el-option label="地理" value="地理"/>
          <el-option label="政治" value="政治"/>
        </el-select>
      </el-form-item>
      <el-form-item label="成绩" prop="score">
        <el-input-number v-model="form.score" :min="0" :max="100" :precision="1" style="width: 100%"></el-input-number>
      </el-form-item>
      <el-form-item label="学期" prop="semester">
        <el-select v-model="form.semester" placeholder="请选择学期" style="width: 100%">
          <el-option label="2023-2024学年第一学期" value="2023-2024学年第一学期"/>
          <el-option label="2023-2024学年第二学期" value="2023-2024学年第二学期"/>
          <el-option label="2024-2025学年第一学期" value="2024-2025学年第一学期"/>
          <el-option label="2024-2025学年第二学期" value="2024-2025学年第二学期"/>
        </el-select>
      </el-form-item>
      <el-form-item label="考试类型" prop="exam_type">
        <el-select v-model="form.exam_type" placeholder="请选择考试类型" style="width: 100%">
          <el-option label="期中考试" value="期中考试"/>
          <el-option label="期末考试" value="期末考试"/>
          <el-option label="月考" value="月考"/>
          <el-option label="随堂测验" value="随堂测验"/>
        </el-select>
      </el-form-item>
      <el-form-item label="考试日期" prop="exam_date">
        <el-date-picker
            v-model="form.exam_date"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注信息"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, defineProps, defineEmits, watch} from 'vue'
import requestUtil from '@/util/request'
import {ElMessage} from 'element-plus'

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
    required: true
  },
  id: {
    type: Number,
    default: -1,
    required: true
  },
  dialogTitle: {
    type: String,
    default: '',
    required: true
  }
})

const emit = defineEmits(['update:modelValue', 'initScoreList'])

const formRef = ref(null)
const form = ref({
  student_id: '',
  student_name: '',
  subject: '',
  score: 0,
  semester: '',
  exam_type: '',
  exam_date: '',
  remark: ''
})

const rules = {
  student_id: [{required: true, message: '请输入学号', trigger: 'blur'}],
  student_name: [{required: true, message: '请输入学生姓名', trigger: 'blur'}],
  subject: [{required: true, message: '请选择科目', trigger: 'change'}],
  score: [{required: true, message: '请输入成绩', trigger: 'blur'}],
  semester: [{required: true, message: '请选择学期', trigger: 'change'}],
  exam_type: [{required: true, message: '请选择考试类型', trigger: 'change'}],
  exam_date: [{required: true, message: '请选择考试日期', trigger: 'change'}]
}

// 监听 id 变化，如果是编辑则加载数据
watch(() => props.id, async (newVal) => {
  if (newVal !== -1) {
    const res = await requestUtil.post("score/detail", {id: newVal})
    if (res.data.code === 200) {
      form.value = res.data.data
    }
  } else {
    // 重置表单
    form.value = {
      student_id: '',
      student_name: '',
      subject: '',
      score: 0,
      semester: '',
      exam_type: '',
      exam_date: '',
      remark: ''
    }
  }
})

const handleClose = () => {
  formRef.value.resetFields()
  emit('update:modelValue', false)
}

const handleConfirm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      let res
      if (props.id === -1) {
        // 新增
        res = await requestUtil.post("score/add", form.value)
      } else {
        // 编辑
        res = await requestUtil.post("score/update", {...form.value, id: props.id})
      }

      if (res.data.code === 200) {
        ElMessage.success(res.data.message)
        formRef.value.resetFields()
        emit('initScoreList')
        emit('update:modelValue', false)
      } else {
        ElMessage.error(res.data.message)
      }
    }
  })
}

</script>

<style scoped>
</style>
